import React from 'react'
import { Button, Dropdown } from 'antd'
import type { MenuProps } from 'antd'
import { useLocation, useNavigate } from 'react-router-dom'
import { DownOutlined } from '@ant-design/icons'
import { RootState, useSelector, useDispatch } from '@/redux'
import { setTabsList } from '@/redux/modules/tabs'
import { TabItem } from '@/redux/type'
import { HOME_URL } from '@/config/config'
import { useTranslation } from 'react-i18next'

const MoreButton = (props: any) => {
  const { pathname } = useLocation()
  const navigate = useNavigate()
  const dispatch = useDispatch()
  const { tabsList } = useSelector((state: RootState) => state.tabs)
  const { delTabs } = props
  const { t } = useTranslation()
  const items: MenuProps['items'] = [
    {
      key: '1',
      label: <span>{t('tab.close_current')}</span>,
      onClick: () => delTabs(pathname)
    },
    {
      key: '2',
      label: <span>{t('tab.close_all')}</span>,
      onClick: () => closeAllTabs()
    }
  ]
  const closeAllTabs = () => {
    const newTabsList = tabsList.filter((item: TabItem) => {
      return item.key === HOME_URL
    })
    dispatch(setTabsList(newTabsList))
    navigate(HOME_URL)
  }
  return (
    <Dropdown
      menu={{ items, selectable: true }}
      placement="bottomLeft"
      arrow={{ pointAtCenter: true }}
      trigger={['click']}
    >
      <Button className="more-btn" type="primary" size="small">
        {t('tab.more')}
        <DownOutlined />
      </Button>
    </Dropdown>
  )
}
export default MoreButton
